<template>
	<view class="sousuo">
		<view class="sousuo_ico"><text class="iconfont icon-sousuo" /></view>
		<view class="sousuo_input">
			<input
				type="text"
				@focus="onFocusInput"
				@blur="onBlurInput"
				placeholder-class="sousuo_placeholder"
				v-model="inpuval"
				:placeholder="placeholder"
			>
		</view>
		<view
			class="sousuo_cances"
			@click="inputCances"
			v-if="type==1"
		>
			确定
		</view>
		<view
			class="select-type"
			v-if="type==2"
		>
			<u-icon
				name="arrow-down"
				:label="label"
				color="#fff"
				labelColor="#fff"
				label-size="12"
				width="200"
			/>
		</view>
	</view>
</template>

<script>
export default {
  name: 'sear-input',
  props: {
    placeholder: {
      type: String,
      default: '请输入'
    },
    value: {
      type: String,
      default: ''
    },
    type: {
      type: Number,
      default: 2
    },
    label: {
      type: String,
      default: '最常访问'
    }
  },
  data() {
    return {
      isShowFocus: false,
      inpuval: '',
      width: '90%'
    }
  },
  methods: {
    onFocusInput: function(event) {
      // console.log('输入框聚焦时触发:',event)
				   // this.inputValue = event.target.value
				   this.isShowFocus = true
				   this.width = '80%'
				   this.$emit('focus')
			   },
    onBlurInput: function(event) {
      // console.log("输入框失去焦点时触发:",event);
      this.$emit('blur')

    },
    inputCances: function() {
      this.isShowFocus = false
      this.inpuval = ''
      this.width = '85%'
      this.$emit('cancel')
    }
  }

}
</script>

<style lang="scss">
.sousuo {
		display: flex;
		align-content: center;
		align-items: center;
		background:linear-gradient(90deg,rgba(58, 98, 233, 0),rgba(58, 98, 233, 1));
		padding: 5px 0;

		margin-top: 10px;
		margin-bottom: 10px;
		border-radius: 5px;
		.sousuo_ico {
			width: 15%;
			text-align: center;
		}

		.sousuo_input {
			width: 75%;
			background: #fff;
			border-radius: 10rpx;
			input {
				font-size: 10px;
				letter-spacing: 1px;
			}

			.sousuo_placeholder {
				font-size: 10px;
				color: #7E7E7E;
			}
		}
		.sousuo_cances{
			position: absolute;
			width: 90%;
			text-align: right;
			font-size: 15px;
			color: #fff;

		}
		.select-type{
				width: 150rpx;
		}
	}

</style>
